<script setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { deleteService, getServiceList } from '@/api/service.js'

const list = ref([])
const listLoading = ref(false)
const query = reactive({
  info: '',
  page_no: 1,
  page_size: 10,
})
const total = ref(0)

const loadTypeOptions = [
  { key: '0', display_name: 'HTTP' },
  { key: '1', display_name: 'TCP' },
  { key: '2', display_name: 'GRPC' },
]

const loadTypeKeyValue = loadTypeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
}, {})

const formatLoadType = (type) => {
  return loadTypeKeyValue[type] || type
}

const fetchData = async () => {
  listLoading.value = true
  try {
    const response = await getServiceList(query)
    list.value = response.data.list
    total.value = response.data.total
  } catch (err) {
    ElMessage.error('获取服务列表失败: ' + (err.message || '未知错误'))
  } finally {
    listLoading.value = false
  }
}

const handleSizeChange = (pageSize) => {
  query.page_size = pageSize
  fetchData()
}

const handleCurrentChange = (pageNo) => {
  query.page_no = pageNo
  fetchData()
}

const handleDeleteService = async (index, row) => {
  try {
    await ElMessageBox.confirm('此操作将会删除该服务，是否继续', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    await deleteService({ id: row.id })
    ElMessage.success('删除服务成功')
    await fetchData()
  } catch (err) {
    if (err === 'cancel') return
    ElMessage.error('删除服务失败: ' + (err.message || '未知错误'))
  }
}

const refresh = () => {
  query.info = ''
  query.page_no = 1
  query.page_size = 10
  fetchData()
}

onMounted(fetchData)
</script>

<template>
  <div class="app-container">
    <div class="search-bar">
      <el-input
        v-model="query.info"
        placeholder="请输入服务名称/服务描述"
        style="width: 300px"
        type="text"
      />
      <el-button style="margin-left: 10px" type="primary" @click="fetchData">
        <i class="el-icon-search" />
        搜索
      </el-button>
      <router-link :to="'/service/add_http/'">
        <el-button class="filter-item" icon="el-icon-edit" style="margin-left: 10px" type="primary">
          添加HTTP服务
        </el-button>
      </router-link>
      <router-link :to="'/service/add_tcp/'">
        <el-button class="filter-item" icon="el-icon-edit" style="margin-left: 10px" type="primary">
          添加TCP服务
        </el-button>
      </router-link>
      <router-link :to="'/service/add_grpc/'">
        <el-button class="filter-item" icon="el-icon-edit" style="margin-left: 10px" type="primary">
          添加GRPC服务
        </el-button>
      </router-link>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      element-loading-text="Loading"
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <!-- 服务名称 -->
      <el-table-column align="center" label="服务名称" width="200">
        <template>
          {{ scope.row.service_name }}
        </template>
      </el-table-column>
      <!-- 服务描述 -->
      <el-table-column align="center" label="服务描述" width="150">
        <template>
          {{ scope.row.service_desc }}
        </template>
      </el-table-column>
      <!-- 类型 -->
      <el-table-column align="center" label="类型" width="100">
        <template>
          <span>{{ formatLoadType(scope.row.load_type) }}</span>
        </template>
      </el-table-column>
      <!-- 服务地址 -->
      <el-table-column align="center" label="服务地址" width="200">
        <template>
          {{ scope.row.service_addr }}
        </template>
      </el-table-column>
      <!-- QPS -->
      <el-table-column align="center" label="QPS" width="80">
        <template>
          {{ scope.row.qps }}
        </template>
      </el-table-column>
      <!-- 日请求数 -->
      <el-table-column align="center" label="日请求数" width="80">
        <template>
          {{ scope.row.qpd }}
        </template>
      </el-table-column>
      <!-- 节点数 -->
      <el-table-column align="center" label="节点数" width="80">
        <template>
          {{ scope.row.total_node }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="节点数" width="80">
        <template>
          {{ scope.row.total_node }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template #default="{ row, $index }">
          <!-- 统计 -->
          <router-link :to="'/service/service_stat/' + row.id">
            <el-button style="margin-left: 5px" type="primary">统计</el-button>
          </router-link>
          <!-- HTTP更新 -->
          <router-link v-if="row.load_type === 0" :to="'/service/service_edit_http/' + row.id">
            <el-button style="margin-left: 5px" type="primary">更新</el-button>
          </router-link>

          <!-- TCP更新 -->
          <router-link v-if="row.load_type === 1" :to="'/service/service_edit_tcp/' + row.id">
            <el-button style="margin-left: 5px" type="primary">更新</el-button>
          </router-link>

          <!-- GRPC更新 -->
          <router-link v-if="row.load_type === 2" :to="'/service/service_edit_grpc/' + row.id">
            <el-button style="margin-left: 5px" type="primary">更新</el-button>
          </router-link>

          <el-button
            style="margin-left: 5px"
            type="danger"
            @click="handleDeleteService($index, row)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        :current-page="query.page_no"
        :page-size="query.page_size"
        :page-sizes="[10, 15, 20, 25]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style lang="less" scoped>
.pagination {
  display: flex;
  justify-content: right;
}

.search-bar {
  padding-bottom: 10px;
}
</style>
